<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:set var="url_context" value="${pageContext.request.contextPath}" scope="application" />
<c:set var="url_style" value="${url_context}/styles" scope="application" />
<c:set var="url_script_lib" value="${url_context}/script/js-libraries" scope="application" />

<html>

	<head>
		
		<link rel="stylesheet" type="text/css" href="${url_style}/iris-all.css" />
		<link rel="stylesheet" href="${url_script_lib}/jcrop/jquery.Jcrop.css" type="text/css" />
		<script type="text/javascript" src="${url_script_lib}/jquery-1.7.2.js"></script>
		<script src="${url_script_lib}/jcrop/jquery.Jcrop.js"></script>
		
	</head>
	
	<body class="tinybox">
		
		<div class="wrapper">
			<c:if test="${param.formsubmitsuccess}">
			</c:if>
			
			<h2><span class="first-letter">A</span>djust your <span class="first-letter">P</span>rofile <span class="first-letter">P</span>icture</h2>
			<div class="hr"></div>
			<br/>
			
			
		</div>
		
		<script type="text/javascript">
			$(window).load(function(){

				if($('img.jcrop').height() < 250) {
					window.location.href="${url_context}/upload-user-photo.jspx?formsubmitsuccess=true&userId=${user.id}";
				} else {
					var jcrop = $.Jcrop('#jcrop', {
						allowSelect: false,
						setSelect: [ 0, 0, 250, 250 ],
						aspectRatio: 1,
						minSize: [ 250, 250 ],
						onChange: updateCoords,
						onSelect: updateCoords
					});
				}
				
			});
			
			function updateCoords(jcrop) {
				$('#x').val(jcrop.x);
				$('#y').val(jcrop.y);
				$('#x2').val(jcrop.x2);
				$('#y2').val(jcrop.y2);
				$('#w').val(jcrop.w);
				$('#h').val(jcrop.h);
			};

		</script>
	</body>

</html>